﻿@using TrackSystem.Entities.Extensions
@using TrackSystem.Entities.Models
@using BootstrapBlazor.Components

<main class="container-fluid py-4">
    <div class="custom-container">
        <div class="container-content">
            @* ----- 顶部主题显示 -------- *@
            @* <div class="col-md-4"> *@
            @*     <div class="stats-card text-left"> *@
            @*         <i class="fas fa-columns fa-2x mb-2"></i> *@
            @*         <h5 class="mb-1">@Slave.Name</h5> *@
            @*         <small>@Slave.Description</small> *@
            @*     </div> *@
            @* </div> *@

            <!-- 数据表格 -->
            @if (_bEditStatus && !_bInsertStatus)
            {
                <div class="table-responsive">
                    <table class="table custom-table">
                        <thead>
                        <tr>
                            <th scope="col">
                                <i class="fas fa-hashtag me-1"></i>
                                序号
                            </th>
                            <th scope="col">
                                <i class="fas fa-tag me-2"></i>
                                参数名称
                            </th>
                            <th scope="col">
                                <i class="fas fa-tag me-4"></i>
                                实际值
                            </th>
                        </tr>
                        </thead>

                        <tbody>
                        <tr>
                            <td><span class="badge bg-primary">1</span></td>
                            <td>端口名称</td>
                            <td>@Slave.Name</td>
                        </tr>
                        <tr>
                            <td><span class="badge bg-primary">2</span></td>
                            <td>端口描述</td>
                            <td>@Slave.Description</td>
                        </tr>
                        <tr>
                            <td><span class="badge bg-primary">3</span></td>
                            <td>协议类型</td>
                            <td>@Slave.Protocol.ToString()</td>
                        </tr>
                        <tr>
                            <td><span class="badge bg-success">4</span></td>
                            <td>端口类型</td>
                            <td>@Slave.PortCategory.ToString()</td>
                        </tr>
                        @if (Slave.PortCategory != PortCategory.SRIAL)
                        {
                            <tr>
                                <td><span class="badge bg-info">5</span></td>
                                <td>本机地址</td>
                                <td>@Slave.LocalIP : @Slave.LocalPort</td>
                            </tr>
                            @if (Slave.PortCategory == PortCategory.UDP)
                            {
                                <tr>
                                    <td><span class="badge bg-info">5</span></td>
                                    <td>远程地址</td>
                                    <td>@Slave.RemoteIP : @Slave.RemotePort</td>
                                </tr>
                            }
                        }
                        else
                        {
                            <tr>
                                <td><span class="badge bg-info">5</span></td>
                                    <td>串口参数</td>
                                    <td>@Slave.Comx  @Slave.BaudRate bps @Slave.SerialParams</td>
                            </tr>
                        }

                        <tr>
                            <td><span class="badge bg-dark">6</span></td>
                            <td>只读存储器地址表</td>
                            <td>
                                    <Textarea PlaceHolder="请输入只读存储器列表..." rows="4" @bind-Value="@Slave.RoList" readonly="true" />
                                </td>
                        </tr>

                        @if (Slave.Protocol != SlaveProtocol.USERDEFINED)
                        {
                            <tr>
                                <td><span class="badge bg-secondary">7</span></td>
                                <td>读写存储器地址表</td>
                                <td>
                                        <Textarea PlaceHolder="请输入读写存储器列表..." rows="4" @bind-Value="@Slave.RwList" readonly="true" />
                                </td>
                            </tr>
                            <tr>
                                <td><span class="badge bg-danger">8</span></td>
                                <td>站地址</td>
                                <td>@Slave.Station</td>
                            </tr>
                        }
                        else
                        {
                            <tr>
                                <td><span class="badge bg-primary">8</span></td>
                                <td>协议定义</td>
                                <td>@Slave.ProtocolDefine</td>
                            </tr>
                            <tr>
                                <td><span class="badge bg-success">9</span></td>
                                <td>循环周期</td>
                                <td>@Slave.Cycle</td>
                            </tr>
                        }
                        </tbody>
                    </table>
                </div>
            }
            else 
   @* --------- 修改内容-----------*@
            {
                <div class="table-responsive">
                    <table class="table custom-table">
                        <thead>
                        <tr>
                            <th scope="col">
                                <i class="fas fa-hashtag me-1"></i>
                                序号
                            </th>
                            <th scope="col">
                                <i class="fas fa-tag me-2"></i>
                                    参数名称
                            </th>
                            <th scope="col">
                                <i class="fas fa-tag me-4"></i>
                                修改值
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td><span class="badge bg-primary">1</span></td>
                            <td>端口名称</td>
                            <td>
                                <BootstrapInput @bind-Value="@_tempSlave.Name" />
                            </td>
                        </tr>
                        <tr>
                            <td><span class="badge bg-primary">2</span></td>
                            <td>端口描述</td>
                            <td>
                                <BootstrapInput @bind-Value="@_tempSlave.Description" />
                            </td>
                        </tr>
                        <tr>
                            <td><span class="badge bg-primary">3</span></td>
                            <td>协议类型</td>
                            <td>
                                @foreach (var item in _ptlItems)
                                {
                                    var clasName = item.Key != _tempSlave.Protocol ? "apple-btn-small" : "apple-btn-small apple-btn-sensor";
                                    <Button class=@clasName
                                            OnClick="@(() => OnPtlChanged(item.Key))">@item.Value</Button>
                                }
                            </td>
                        </tr>
                        <tr>
                            <td><span class="badge bg-success">4</span></td>
                            <td>端口类型</td>
                            <td>
                                @foreach (var item in _portItems)
                                {
                                    var pClass = item.Key != _tempSlave.PortCategory ? "apple-btn-small" : "apple-btn-small apple-btn-sensor";
                                    <Button class=@pClass OnClick="@(() => OnPortChanged(item.Key))">@item.Value</Button>
                                }
                            </td>
                        </tr>
                        @if (_tempSlave.PortCategory != PortCategory.SRIAL)
                        {
                            <tr>
                                <td><span class="badge bg-info">5</span></td>
                                <td>本机地址</td>
                                <td>
                                    <BootstrapInputGroup>
                                        <BootstrapInput @bind-Value="@_tempSlave.LocalIP"/>
                                        <BootstrapInputNumber @bind-Value="@_tempSlave.LocalPort"/>
                                    </BootstrapInputGroup>
                                </td>
                            </tr>
                                @if (_tempSlave.PortCategory == PortCategory.UDP)
                            {
                                <tr>
                                    <td><span class="badge bg-info">5</span></td>
                                    <td>远程地址</td>
                                    <td>
                                        <BootstrapInputGroup>
                                            <BootstrapInput @bind-Value="@_tempSlave.RemoteIP" />
                                            <BootstrapInputNumber @bind-Value="@_tempSlave.RemotePort" />
                                        </BootstrapInputGroup>
                                    </td>
                                </tr>
                            }
                        }
                        else
                        {
                            <tr>
                                <td><span class="badge bg-info">5</span></td>
                                <td>串口参数</td>
                                <td>
                                    <BootstrapInputGroup>
                                            <BootstrapInput @bind-Value="@_tempSlave.Comx"></BootstrapInput>
                                            <BootstrapInputNumber @bind-Value="@_tempSlave.BaudRate"></BootstrapInputNumber>
                                            <Dropdown TValue="string" Items="_serialParamsItems"
                                                      OnSelectedItemChanged="@OnParamChanged"
                                                      Color="Color.Secondary"
                                                      IsFixedButtonText="true" />
                                    </BootstrapInputGroup>
                                </td>
                            </tr>
                        }

                        <tr>
                            <td><span class="badge bg-dark">6</span></td>
                            <td>
                                    只读存储器地址表
                            </td>
                            <td>
                                <BootstrapInputGroup>
                                    <Dropdown TValue="string"
                                                Items="_nameItems"
                                                OnSelectedItemChanged="@((a) => OnRoInsertReg(a))"
                                                Color="Color.Info"/>
                                    <Textarea PlaceHolder="请输入只读存储器列表..." rows="4" @bind-Value="@_tempSlave.RoList" />
                                </BootstrapInputGroup>
                            </td>
                        </tr>

                        @if (_tempSlave.Protocol != SlaveProtocol.USERDEFINED)
                        {
                            <tr>
                                <td><span class="badge bg-secondary">7</span></td>
                                <td>
                                    读写存储器地址表
                                </td>
                                <td>
                                    <BootstrapInputGroup>
                                            <Dropdown TValue="string"
                                                      Items="_nameItems"
                                                      OnSelectedItemChanged="@((a) => OnRwInsertReg(a))"
                                                      Color="Color.Secondary"/>
                                            <Textarea PlaceHolder="请输入读写存储器列表..." rows="4" @bind-Value="@_tempSlave.RwList" />
                                    </BootstrapInputGroup>
                                </td>
                            </tr>

                            <tr>
                                <td><span class="badge bg-danger">8</span></td>
                                <td>站地址</td>
                                <td>
                                    <BootstrapInputNumber @bind-Value="@_tempSlave.Station"/>
                                </td>
                            </tr>
                        }
                        else
                        {
                            <tr>
                                <td><span class="badge bg-primary">8</span></td>
                                <td>协议定义</td>
                                <td>
                                    <BootstrapInput @bind-Value="@_tempSlave.ProtocolDefine"/>
                                </td>
                            </tr>
                            <tr>
                                <td><span class="badge bg-success">9</span></td>
                                <td>循环周期</td>
                                <td>
                                    <BootstrapInputNumber @bind-Value="@_tempSlave.Cycle"/>
                                </td>
                            </tr>
                        }
                        </tbody>
                    </table>
                </div>
            }


            @* ---- 底部操作按钮-------- *@
            <div class="table-controls">
                <div class="row align-items-center">
                    <div class="d-flex flex-column flex-md-row gap-3">
                        @if (_bEditStatus && !_bInsertStatus)
                        {
                            <Button class="btn btn-secondary flex-fill" OnClick="BtnClickEdit">
                                <i class="far fa-edit me-2"></i>编辑
                            </Button>
                            <Button class="btn btn-secondary flex-fill" OnClick="BtnClickInsert">
                                <i class="far fa-edit me-2"></i>新建
                            </Button>                        }
                        else
                        {
                            <Button class="btn btn-secondary flex-fill" OnClick="BtnClickSave">
                                <i class="far fa-clone me-2"></i>保存
                            </Button>
                            <Button class="btn btn-secondary flex-fill" OnClick="BtnClickCancel">
                                <i class="fa-regular fa-rectangle-xmark me-2">取消</i>
                            </Button>
                        }
                        <PopConfirmButton class="btn flex-fill"
                                          Placement="Placement.Top"
                                          Color="Color.Danger"
                                          ConfirmIcon="fa-solid fa-triangle-exclamation text-danger"
                                          ConfirmButtonColor="Color.Danger"
                                          Text="删除"
                                          Content="确定删除该从站内容吗？"
                                          OnConfirm="OnDeleteSlaveAsync"/>


                </div>
                <Divider/>
                <div class="row align-items-center">
                    <div class="d-flex flex-column flex-md-row gap-3">
                        <p class="mb-1">@_sMessage</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
</main>

<style>
    /* 添加下拉菜单容器滚动条 */
    .dropdown-menu {
        max-height: 200px; /* 限制最大高度 */
        overflow-y: auto; /* 垂直滚动条 */
        scrollbar-width: thin; /* 细滚动条样式 */
        background: gray;
        z-index:1000;
        
  }

    /* 滚动条美化（可选）*/
    .dropdown-menu::-webkit-scrollbar {
        width: 6px;
    }

    .dropdown-menu::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 3px;
    }
</style>
